<template>
    <a-table
            v-bind="$attrs"
            @change="onChange"
            class="xl-table"
            :scroll="{x:scrollX}"
            ref="table"
    >
        <template slot="tooltip" slot-scope="text, record, index,option">
            <a-tooltip placement="top" >
                <template slot="title">
                    <span v-if="option.type == 'select'">
                        {{typeof option.typeData == 'string'?getSelectData($store.getters.dictionary[option.typeData],text):getSelectData(option.typeData,text)}}
                    </span>
                    <span v-else-if="option.type == 'cascader'">
                        {{getCasCaderData(option.typeData,text)}}
                    </span>
                    <span v-else-if="option.type == 'radio'">
                        {{typeof option.typeData == 'string'?getSelectData($store.getters.dictionary[option.typeData],text):getSelectData(option.typeData,text)}}
                    </span>
                    <span v-else-if="option.type == 'date'">
                        {{getData(text,option)}}
                    </span>
                    <span v-else-if="option.type == 'switch'">
                        {{text?text=='是'?'是':'否':'否'}}
                    </span>
                    <span v-else-if="option.type == 'dateRange'">
                        {{getRangeData(record[option.typeData.startDate],option)+ '~' + getRangeData(record[option.typeData.endDate],option)}}
                    </span>
                    <span v-else-if="option.type == 'input.money'">
                        {{moneyFormat(text)}}
                    </span>
                    <span v-else>
                        {{ text?text:'--'}}
                    </span>
                </template>
                <span v-if="option.type == 'select'">
                    {{typeof option.typeData == 'string'?getSelectData($store.getters.dictionary[option.typeData],text):getSelectData(option.typeData,text)}}
                </span>
                <span v-else-if="option.type == 'cascader'">
                    {{getCasCaderData(option.typeData,text)}}
                </span>
                <span v-else-if="option.type == 'radio'">
                    {{typeof option.typeData == 'string'?getSelectData($store.getters.dictionary[option.typeData],text):getSelectData(option.typeData,text)}}
                </span>
                <span v-else-if="option.type == 'date'">
                    {{getData(text,option)}}
                </span>
                <span v-else-if="option.type == 'switch'">
                    {{text?text=='是'?'是':'否':'否'}}
                </span>
                <span v-else-if="option.type == 'editor'">
                    {{text}}
                </span>
                <span v-else-if="option.type == 'dateRange'">
                    {{getRangeData(record[option.typeData.startDate],option)+ '~' + getRangeData(record[option.typeData.endDate],option)}}
                </span>
                <span v-else-if="option.type == 'input.money'">
                        {{moneyFormat(text)}}
                </span>
                <span v-else-if="option.type == 'upload'">
                    <img :src="text" :onerror="defaultImg" style="width: 20px;height: 20px;" alt="">
                </span>
                <span v-else>
                    {{ text?text:'--' | ellipsis(11,option) }}
                </span>
            </a-tooltip>
        </template>
        <!-- <template slot="imgSlot" slot-scope="text">
            <img :src="text" height="25px" :onerror="defaultImg" style="max-width:80px;"/>
        </template> -->
        <template v-for="(slotItem,slotIndex) of slotsName" :slot="slotItem" slot-scope="text, record, index, option">
            <slot :name="slotItem" v-bind="{text,record,index,option}"></slot>
        </template>
    </a-table>
</template>

<script>
    import moment from 'moment'

    export default {
        name: "xlTable",
        data() {
            return {
                slotsName: [],
                defaultImg: 'this.src="' + require('../../assets/images/defavatar.jpg') + '"'
            }
        },
        props: {
            scrollX: {
                type: Number,
                default: 1200
            }
        },
        created() {
            let columns = Object.assign([], this.$attrs.columns)
            let columnsData = []
            columns.map((item, index) => {
                if (!item.tableVisible) {
                    columnsData.push(item)
                    if (item.scopedSlots && item.scopedSlots.customRender) {
                        if (item.scopedSlots.customRender != 'tooltip') {
                            this.slotsName.push(item.scopedSlots.customRender)
                        }
                    }
                }
            })
            console.log(columnsData)
            this.$attrs.columns = columnsData
        },
        methods: {
            // copy(text) {
            //     this.$copyText(text).then(() => {
            //         this.$message.success('复制成功');
            //     }, () => {
            //         this.$message.error('复制失败');
            //     })
            // },
            onChange(pagination, filters, sorter) {
                this.$emit('change', pagination, filters, sorter)
            },
            getSelectData(data, text) {
                if (data) {
                    const target = data.filter(item => text == item.codeMasterValue)[0]?.codeMasterName || data.filter(item => text == item.dataValue)[0]?.dataName || '--'
                    return target
                } else {
                    return text
                }
            },
            getCasCaderData(data, text) {
                if (!text) {
                    return '--'
                }
                let arr = data.reduce((op, {value, label, children}) => op.concat([{value, label}], children), [])
                if (data) {
                    let target = []
                    JSON.parse(text).forEach(item => {
                        target.push(
                            arr.filter(a => a.value == item)[0].label
                        )
                    })
                    return target.join('/')
                } else {
                    return text
                }
            },
            getData(date, option) {
                if (date) {
                    if (!option?.typeData) {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (option.typeData.type == 'date') {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (option.typeData == 'dateTime') {
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if (option.typeData == 'month') {
                        return moment(date).format('YYYY-MM')
                    }
                    if (option.typeData == 'year') {
                        return moment(date).format('YYYY')
                    }

                } else {
                    return '--'
                }
            },
            getRangeData(date, option) {
                if (date) {
                    if (option.typeData.type == 'date') {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (option.typeData.type == 'dateTime') {
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if (option.typeData.type == 'month') {
                        return moment(date).format('YYYY-MM')
                    }
                    if (option.typeData.type == 'year') {
                        return moment(date).format('YYYY')
                    }

                } else {
                    return '--'
                }
            },
            moneyFormat(num) {
                var reg = /\d{1,3}(?=(\d{3})+$)/g;
                return (num + '').replace(reg, '$&,');
            }
        },
        filters: {
            ellipsis(value, vlength = 8, option) {
                if (!value) {
                    return "";
                }
                if (value.length > vlength && option.ellipsisF) {
                    return value.slice(0, vlength) + '...'
                }
                return value
            }
        },
        watch: {
            '$attrs.columns'() {
                let columns = Object.assign([], this.$attrs.columns)
                let columnsData = []
                columns.map((item, index) => {
                    if (!item.tableVisible) {
                        columnsData.push(item)
                        if (item.scopedSlots && item.scopedSlots.customRender) {
                            if (item.scopedSlots.customRender != 'tooltip') {
                                this.slotsName.push(item.scopedSlots.customRender)
                            }
                        }
                    }
                })
                this.$attrs.columns = columnsData
            }
        }
    }
</script>
